<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css伪类</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
        }

        .box {
            margin: 20px auto;
            padding: 30px;
            width: 300px;
            border: 1px dashed green;
        }

        .box p {
            line-height: 20px;
        }

        .box p:before {
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            content: '珠峰培训';
            background: lightblue;
        }

        .box p:after {
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            content: '珠峰培训';
            background: lightgreen;
        }

        .clear {
            zoom: 1;
        }

        .clear:after {
            display: block;
            width: 0;
            height: 0;
            content: '';
            overflow: hidden;
            clear: both;
        }

        ul, li {
            list-style: none;
        }

        .list {
            margin: 20px auto;
            padding: 30px;
            width: 300px;
            border: 1px solid #000000;
        }

        .list li {
            float: left;
            width: 100px;
            height: 100px;
            background: lightyellow;
        }

        .list li:nth-child(odd) {
            background: lightblue;
        }

        .list li:nth-child(even) {
            background: lightgreen;
        }
    </style>
</head>
<body>
<div class="box">
    <p id="boxP">
        本书从最早期Netscape浏览器中的JavaScript开始讲起，直到当前它对XML和Web服务的具体支持，内容主要涉及JavaScript的语言特点、JavaScript与浏览器的交互、更高级的JavaScript技巧，以及与在Web应用程序中部署JavaScript解决方案有关的问题，如错误处理、调试、安全性、优化/混淆化、XML和Web服务，最后介绍应用所有这些知识来创建动态用户界面。
    </p>
</div>
<ul class="list clear">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>
<script>
    var boxP = document.getElementById('boxP');
    console.log(window.getComputedStyle(boxP, 'before').content);
    console.log(window.getComputedStyle(boxP, 'after').height);
</script>